<!DOCTYPE html>
<html>
<head th:include="cultivateWeb/header :: culHeaderCss"></head>

<body>
<!-- 顶部导航 -->
<header th:include="cultivateWeb/header :: header"></header>
<link type="text/css" href="/css/cultivateWeb/style/course.css" rel="stylesheet">
<div style="background-color: #f7f7f7; ">
    <input th:value="${id}" type="hidden" id="examId"/>
    <input th:value="${type}" type="hidden" id="type"/>
    <div class="layui-container">
        <p style="line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> >
            <a href="/cultivate/study/studyOnline">在线学习</a> > <span id="typeContent"></span></p>
    </div>
    <section>
        <div class="layui-container bt50">
        <div class="signinpanel">
            <div style="border-bottom: 1px solid #efefef">
                <div class="h1_1" id="showtime" style="border-bottom:none;padding:30px 0;"></div>
            </div>
            <div class="row">
                <div class="col-sm-9" style="border-right: 1px solid #e4e4e4;">
                    <div class="login_panel" style="margin: auto;width:100%;font-size:20px;">
                        <div id="content" style="margin-top:40px">
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="rt_content">
                        <div class="rt_content_tt">
                            <h2>答题卡</h2>
                        </div>
                        <div class="rt_content_nr answerSheet">
                            <ul id="answer"></ul>
                        </div>
                    </div>
                </div>
            </div>
            <div style="margin-top: 40px">
                <div class="div-1" id="process" style="text-align: center">
                </div>
                <div class="div-1" style="text-align: center">
                    <input class="btn1 btn1-block" style="margin:10px auto" id="sub"  onclick="question();" value="交卷"/>
                </div>
            </div>
        </div>
        </div>
    </section>
</div>

<!-- footer ------------------------------------------------------- -->
<div class="footer" th:include="cultivateWeb/header :: footer"></div>
</body>
<script>
    $("#typeContent").text("班级考试")
    var index = 0;
    var allsubject=0;
    var tpaperId='';
    $(function () {
        getData(0);
        //渲染答题卡选中状态
        $("#content").on("click",".mar10",function () {
            var that = $(this);
            var examId = that.parents('.titleEaxm').attr('data-id');
            var type = that.parents('.titleEaxm').attr('type');

            //console.log("examId:"+examId);

            /*根据题目ID找到对应答题卡*/
            var cardLi = $('li[data-id=' + examId + ']');
            //多选题
            if(type==1){
                var a = true;//控制答题卡是否选中
                var b = false;//判断选项是否选中
                if(!that.find("input").prop('checked')){
                    that.siblings(".mar10").each(function () {
                        //选择了一个选项则为true
                        if($(this).find("input").prop('checked')){
                            b = true
                        }
                    });

                }else{
                    b = true;
                }
                if(a){
                    if(b){
                        cardLi.addClass('hasBeenAnswer');
                    }else{
                        cardLi.removeClass('hasBeenAnswer');
                    }
                }else {
                    cardLi.removeClass('hasBeenAnswer');
                }
            }else{
                if (!cardLi.hasClass('hasBeenAnswer')) {
                    cardLi.addClass('hasBeenAnswer');
                }
            }
        });
        //
        //点击答题卡跳转题目
        $("#answer").on("click",".anLi",function () {
            index = $(this).attr('data-index');
            toGo(index)

        });
        //答案存入缓存
        $("#content").on("change","input",function () {
            var subject = '';
            $('.titleEaxm').each(function (i, res) {
                var that = $(this);
                var examId = that.attr('data-id');
                var type = that.attr('type');
                //console.log("type:"+type);
                //单选、判断
                if (type == 0 ||　type == 1 || type == 2) {
                    //进度显示
                    if (that.find($('input:checked')).val() != undefined) {
                        subject = subject * 1 + 1
                    }
                }else if (type == 3) { //填空
                    //进度显示
                    if (that.find($('input')).val() != undefined && that.find($('input')).val() != '') {
                        subject = subject * 1 + 1
                    }
                }else if (type == 4) { //问答

                   // console.log("that.find($('textarea')).val():"+that.find($('textarea')).val());
                    //进度显示
                    if (that.find($('textarea')).val() != undefined && that.find($('textarea')).val() != '') {
                        subject = subject * 1 + 1
                    }
                }

            });
            //题目完成进度
            var process = (subject / allsubject) * 100;
            $("#process").html("共" + allsubject + "道题目，已完成" + process.toFixed(2) + "%");
        });
    });
    function textareaChange(value){
        var subject = '';
        $('.titleEaxm').each(function (i, res) {
            var that = $(this);
            examId = that.attr('data-id');
            var type = that.attr('type');
            //console.log("type:"+type);
            //单选、判断
            if (type == 0 ||　type == 1 || type == 2) {
                //进度显示
                if (that.find($('input:checked')).val() != undefined) {
                    subject = subject * 1 + 1
                }
            }else if (type == 3) { //填空
                //进度显示
                if (that.find($('input')).val() != undefined && that.find($('input')).val() != '') {
                    subject = subject * 1 + 1
                }
            }else if (type == 4) { //问答
                //console.log("$('#'+examId+'_0').val():"+$('#'+examId+'_0').val());
                //进度显示
                if ($('#'+examId+'_0').val() != undefined && $('#'+examId+'_0').val() != '') {
                    subject = subject * 1 + 1;
                }
            }

        });
        //题目完成进度
        var process = (subject / allsubject) * 100;
        $("#process").html("共" + allsubject + "道题目，已完成" + process.toFixed(2) + "%");
    }
    function getData(titleNumber) {
        let disableStr = '';
        ajaxToken("/jzApi/courses/selClassesExamnation", 'POST',
            {
                id: $("#examId").val(),
                type: $("#type").val(),
            }, function (res) {
                tpaperId=res.id;
                var a = '<div>';//题目
                var an = '';//答题卡
                allsubject = res.questions.length;
                $("#process").html("共" + allsubject + "道题目，已完成0%");
                res.questions.forEach(function (item, index, arr) {
                    let content ='';
                    //渲染答题卡
                    an += '<li class="anLi" data-index="' + index + '" data-id="' + item.id + '"><a href="#">' + parseInt(parseInt(index)+parseInt(1)) + '</a></li>';

                    //控制题目展示
                    let f = '';
                    if (titleNumber == index) {
                        f = 'contentBoxShow box'
                    } else {
                        f = 'contentBoxHide box'
                    }
                    var list = item.options.split(";;");
                    //     var pre = index-1;
                    //     var next = index+1;
                    var last = arr.length - 1;
                    var b = '', d = '', e = '';
                    var c = '';//切换按钮
                    //判断题目类型，写入题目描述
                    if (item.type == 0) {  //单选
                        //写入题目选项
                        for (var i = 0; i < list.length; i++) {
                            b += '<div class="mar10">' +
                                '   <input type="radio" class="marR10 subject" id="' + item.id + '_' + i + '" name="' + item.id + '" value="' + list[i] + '" />'
                                + ' <label for="' + item.id + '_' + i + '">' + list[i] + '</label>' +
                                '</div>'
                        }
                        content += '<div type="'+item.type+'" class="' + f + ' titleEaxm" data-id="' + item.id + '" data-index="' + index + '">' +
                            '   <div>' + parseInt(parseInt(index)+parseInt(1))+ '、（单选题）（' + item.score + '分）' + item.introduce + '</div>' + b;
                    }
                    //判断题目类型，写入题目描述
                    if (item.type == 2) { //判断
                        //写入题目选项
                        for (var i = 0; i < list.length; i++) {
                            b += '<div class="mar10">' +
                                '<input type="radio" class="marR10 subject" id="' + item.id + '_' + i + '" name="' + item.id + '"  value="' + list[i] + '" />'
                                + '<label for="' + item.id + '_' + i + '">' + list[i] + '</label>' +
                                '</div>'
                        }
                        content += '<div type="'+item.type+'" class="' + f + ' titleEaxm" data-id="' + item.id + '" data-index="' + index + '">' +
                            '   <div>' +  parseInt(parseInt(index)+parseInt(1)) + '、（判断题）（' + item.score + '分）' + item.introduce + '</div>' + b;
                    }
                    if (item.type == 1) {  //多选
                        //写入题目选项
                        for (var i = 0; i < list.length; i++) {
                            b += '<div class="mar10">' +
                                '<input type="checkbox" class="marR10 subject" id="' + item.id + '_' + i + '" name="' + item.id + '" value="' + list[i] + '" />'
                                + '<label for="' + item.id + '_' + i + '">' + list[i] + '</label>' +
                                '</div>'
                        }
                        content += '<div type="'+item.type+'" class="' + f + ' titleEaxm" data-id="' + item.id + '"  data-index="' + index + '">' +
                            '   <div>' +  parseInt(parseInt(index)+parseInt(1)) + '、（多选题）（' + item.score + '分）' + item.introduce + '</div>' + b;
                    }
                    if (item.type == 3) {  //填空题
                        //写入题目选项
                        if(item.children.length>0){
                            let titleStr = '';
                            let childrenStr = '';
                            b +=
                                '    <div class="list dis_row a_center" style="border-bottom: 1px solid #f7f7f7;height: auto;margin-top: 20px;">\n' +
                                '        <div class="list dis_row a_center" style="width: 100%;height: 100%;">\n' +
                                '            <h3 style="margin-left: 10px;color: #000;">'+  parseInt(parseInt(index)+parseInt(1)) + '、（填空题）（' + item.score + '分）' ;
                            item.children.forEach(function (item2, index2) {

                                titleStr += '<span style="margin-left: 10px;color: #000;">' ;
                                if(index2 < item.children.length-1){
                                    titleStr += item2.topic+'</span>' +
                                        '<span style="background-color: #e8f9ff;margin-left: 10px;color: #666;">(填空'+(index2+1)+')</span>';
                                }else {
                                    titleStr += item2.topic+'</span>';
                                }

                                if(index2 < item.children.length-1) {
                                    childrenStr +=
                                        '    <div class="mar10" class="list dis_row a_center" style="border-bottom: 1px solid #f7f7f7;height: 50px;margin-top: 20px;">\n' +
                                        '        <div class="list dis_row a_center" style="width: 100%;height: 100%;">\n';
                                    childrenStr +=
                                        '          <input class="marR10" style="margin-left: 10px;width: 80%;height: 50px;" type="text" '+ disableStr +'  placeholder="请输入填空' + (index2+1) + '的答案"  id="' + item.id + '_' + index2 + '" name="' + item.id + '" />';

                                    childrenStr +=
                                        '        </div>\n' +
                                        '    </div>\n';
                                }
                            });
                            titleStr +='</h3>';
                            b += titleStr;
                            b +='</div>\n' +
                                '    </div>\n';
                            b += childrenStr;
                        }
                        content += '<div type="'+item.type+'" class="' + f + ' titleEaxm" data-id="' + item.id + '"  data-index="' + index + '">' +
                            '   <div>'+ b + '</div>' ;
                    }

                    if (item.type == 4) {  //问答题
                        //写入题目选项
                        for (var i = 0; i < list.length; i++) {
                            b += '<div class="mar10" style="height: 101px;border: 1px solid #000;">' +
                                '<textarea type="text" onblur="textareaChange()" class="marR10 subject" id="' + item.id + '_' + i + '" name="' + item.id + '" value="" style="height: 100px;width: 100%;margin: 0 0 0 0;" ></textarea>'+
                                '</div>'
                        }
                        content += '<div type="'+item.type+'" class="' + f + ' titleEaxm" data-id="' + item.id + '"  data-index="' + index + '">' +
                            '   <div>' +  parseInt(parseInt(index)+parseInt(1)) + '、（问答题）（' + item.score + '分）' + item.introduce + '</div>' + b;
                    }
                    //当前题目为第一题则不能点击上一题，为最后一题不能点击下一题
                    if (index == 0) {
                        d = '<button class="btn1 not-allowed" disabled onclick="pre();">上一题</button>'
                    } else {
                        d = '<button class="btn1" id="pre" onclick="pre();">上一题</button>'
                    }
                    if (index == last) {
                        e = '<button class="btn1 not-allowed" disabled onclick="next();">下一题</button>'
                    } else {
                        e = '<button class="btn1" id="next" onclick="next();">下一题</button>'
                    }
                     c = '<div class="div-1 changebtn1" style="display:flex;justify-content:space-between;margin:40px 0 100px 0">' +
                            '<button class="btn1" onclick="first();">第一题</button>' +
                            d +
                            e +
                            '<button class="btn1" onclick="last();">最后一题</button>' +
                          '</div>';
                    content += c;
                    content += '</div>';
                    a += content;
                });
                a += '</div>';
                $("#content").html(a);
                $("#answer").html(an)  //答题卡
            }
        )
    }
    function question() {
        layer.confirm("确定要交卷？", {
            btn: ['确定', '取消']
        }, function (index, layero) {
            submit()
        }, function (index) {
        });
    }

    function toGo(index) {
        changeCss(index)
    }

    function first() {
        index = 0;
        changeCss(index)
    }

    function last() {
        index =  allsubject - 1;
        changeCss(index)
    }

    function next() {
        index = parseInt(index) + parseInt(1);
        changeCss(index)
    }

    function pre() {
        index = parseInt(index) - parseInt(1);
        changeCss(index)
    }

    //控制题目展示
    function changeCss(index) {
        $('.box').each(function (i, res) {
            if (index == i) {
                $(this).addClass("contentBoxShow");
                $(this).removeClass("contentBoxHide");
            } else {
                $(this).addClass("contentBoxHide");
                $(this).removeClass("contentBoxShow")
            }
        });

    }
    countDown();
    function addZero(i) {
        return i < 10 ? "0" + i : i + "";
    }
    var second = 0;
    function countDown() {
        second++;
        var h = parseInt(second / (60 * 60) % 24);
        var m = parseInt(second / 60 % 60);
        var s = parseInt(second % 60);
        // d = addZero(d)
        h = addZero(h);
        m = addZero(m);
        s = addZero(s);
        document.querySelector("#showtime").innerHTML =  h + '时' + m + '分' + s + '秒';
        setTimeout(countDown, 1000);
    }
    //提交答卷
    function submit() {
        var answerList = [];
        $('.titleEaxm').each(function (i, res) {
            var that = $(this);
            var che ='';
            var type = that.find("input").attr("type");
            var examId = that.attr('data-id');
            var type2 = that.attr('type');
            //console.log("type2:" + type2);
            if(type2 != 4) {
                //单选、判断
                if (type == 'radio') {
                    var rad = '';
                    if (that.find($('input:checked')).val() != '' && that.find($('input:checked')).val() != undefined) {
                        rad = that.find($('input:checked')).val();
                    }
                    answerList.push({id: that.attr("data-id"), value: rad});
                } else if (type == 'checkbox') { //多选
                    that.find('input:checkbox:checked').each(function (i) {
                        if ($(this).val() != '') {
                            che += $(this).val() + ';;';
                        }
                    });
                    answerList.push({id: that.attr("data-id"), value: che});
                } else if (type == 'text') { //填空和问答
                    that.find('input').each(function (i) {
                        if ($(this).val() != undefined) {
                            che += $(this).val() + ';;';
                        }
                    });
                    answerList.push({id: that.attr("data-id"), value: che});
                }
            }else {
               // console.log("$('#'+examId+'_0').val():"+$('#'+examId+'_0').val());
                if ($('#'+examId+'_0').val() != undefined) {
                    che += $('#'+examId+'_0').val();
                }
                answerList.push({id: that.attr("data-id"), value: che});
            }
        });
        //console.log("answerList:"+JSON.stringify(answerList));
        ajaxToken("/jzApi/courses/submitClassesExamnation", 'POST',
            {   id:tpaperId,
                type: '', //
                time:second,//(单位：秒)
                answerList:JSON.stringify(answerList)
            }, function (res) {
                layer.confirm("试卷已提交，等待老师批阅", {
                    closeBtn:0,
                    btn: ['查看答卷', '返回学习'],
                    yes: function(index, layero){
                        location.href='/cultivate/study/studyClassesExamAnswerDetail?paperId='+res.paperId
                    },
                    btn2: function(index, layero){
                        location.href='/cultivate/myCourse';
                        return false
                    }
                });

            }
        )
    }


</script>

</html>